<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的第一个网格</title>

<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.7.2.custom/css/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<script src="jqgrid/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){ 
  $("#list").jqGrid({
    url:'01_installing/data/my_first_grid_data.txt',	//返回数据的地址
    datatype: 'json',	//返回数据的类型
    mtype: 'GET',	//请求的方式
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],	//列表
    colModel :[ 	//数据模型
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',	//指定分页栏 的渲染 的ID
    rowNum:10,	//在grid上显示记录条数,每页显示多少条
    rowList:[10,20,30],	//一个数组用来调整表格显示的记录数，此参数值会替代rowNum参数值传给服务器端。如果为空则不显示，设置格式：[10,20,30]
    sortname: 'invid',	//排序列的名称，此参数会被传到后台
    sortorder: 'desc',	//排序顺序，升序或者降序（asc or desc）
    viewrecords: true,	//是否要显示总记录数
    gridview: true,	//构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中
    caption: 'My first grid'	//定义表格名称
  }); 
}); 
</script>

</head>
<body>
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 
</body>
</html>